<template>
    <section class="form-container">
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="160px" style="padding:30px 14px;">

            <el-form-item label="所属线路" prop="lineId">
                <el-select
                    v-model="formData.lineId"
                    filterable
                    placeholder="请选择"
                    style="width:100%;"
                    @change="getVehicleTypeList()"
                >
                    <el-option
                        v-for="item in lineOptions"
                        :key="item.id"
                        :label="item.lineName"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="出发车场" prop="startCarParkIds">
                <div>
                  <el-button type="text" @click="selectAllStart()">全选</el-button>
                  <el-button type="text" @click="selectOppositeStart()">反选</el-button>
                </div>
                <el-checkbox-group v-model="formData.startCarParkIds">
                  <el-checkbox v-for="(item, index) in carParkOptions" :key="index" :label="item.id">
                    {{item.carParkName}}
                  </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="到达车场" prop="endCarParkIds">
                <div>
                  <el-button type="text" @click="selectAllEnd()">全选</el-button>
                  <el-button type="text" @click="selectOppositeEnd()">反选</el-button>
                </div>
                <el-checkbox-group v-model="formData.endCarParkIds">
                  <el-checkbox v-for="(item, index) in carParkOptions" :key="index" :label="item.id">
                    {{item.carParkName}}
                  </el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-row>
                <el-col :span="10">
                    <el-form-item label="车型" prop="vehicleTypeId">
                        <el-select
                            v-model="formData.vehicleTypeId"
                            placeholder="请选择"
                            style="width:100%;"
                            @change="getSeatList"
                        >
                            <el-option
                                v-for="item in vehicleTypeOptions"
                                :key="item.id"
                                :label="item.vehicleTypeName"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8" style="margin-left:10px;">
                    <el-input placeholder="请输入价格" v-model="batchPrice">
                      <el-button @click="batchSet" slot="append">批量设置</el-button>
                    </el-input>
                </el-col>
            </el-row>


            <el-form-item label="座位价格" prop="lineSectionSeatList">
                  <el-table
                      style="width: 100%"
                      :data="formData.lineSectionSeatList"
                      border
                      stripe
                      :header-cell-style = "headerCellStyle"
                  >
                      <el-table-column label="序号" width="60">
                          <template #default="scope">
                              {{ scope.$index + 1 }}
                          </template>
                      </el-table-column>
                      <el-table-column prop="seatName" label="座位名称"/>
                      <el-table-column prop="seatPrice" label="价格">
                          <template #default="scope">
                              <el-input v-model="scope.row.seatPrice" size="small" v-if="!scope.row.isDriverSeat"/>
                          </template>
                      </el-table-column>

                      <el-table-column prop="row" label="第几排"/>
                      <el-table-column prop="col" label="第几列"/>
                      <el-table-column prop="saleTicketType" label="售票类型">
                          <template #default="scope">
                              <el-tag :type="scope.row.saleTicketTypeStyle">
                                  {{ scope.row.saleTicketTypeName }}
                              </el-tag>
                          </template>
                      </el-table-column>
                      <el-table-column prop="status" label="座位状态">
                          <template #default="scope">
                              <el-tag :type="scope.row.statusStyle">
                                  {{ scope.row.statusName }}
                              </el-tag>
                          </template>
                      </el-table-column>
                      <el-table-column prop="isDriverSeat" label="司机位">
                          <template #default="scope">
                              <el-tag v-if="scope.row.isDriverSeat">是</el-tag>
                              <el-tag v-else type="info">否</el-tag>
                          </template>
                      </el-table-column>
                  </el-table>
            </el-form-item>

            <el-form-item>
                <el-popconfirm :title="'确定批量添加座位价格吗？'" @onConfirm="submitForm()">
                    <el-button slot="reference" type="primary">立即添加</el-button>
                </el-popconfirm>
            </el-form-item>
        </el-form>
    </section>
</template>

<script>
import {LineSectionSeatApi} from '@/api/intercity/LineSectionSeatApi'
import {CarParkApi} from '@/api/intercity/CarParkApi'
import {LineApi} from '@/api/intercity/LineApi'
import {Common} from '@/utils/common'
import {LineGroupApi} from '@/api/intercity/LineGroupApi'
import {VehicleTypeSeatApi} from '@/api/user/VehicleTypeSeatApi'

export default {
    name: 'batchAddLineSectionSeatPrice',
    components: {},
    data() {
        return {
            formData: {
                lineId: '',
                startCarParkIds: [],
                endCarParkIds: [],
                sectionDistance: '',
                vehicleTypeId:'',
                lineSectionSeatList:[]
            },
            rules: {
                lineId: [
                    {required: true, message: '请选择线路', trigger: 'change'}
                ],
                startCarParkIds: [
                    {required: true, message: '请选择出发车场', trigger: 'change'}
                ],
                endCarParkIds: [
                    {required: true, message: '请选择到达车场', trigger: 'change'}
                ],
                vehicleTypeId: [
                    {required: true, message: '请选择车型', trigger: 'change'}
                ],
                lineSectionSeatList: [
                    {required: true, message: '请设置座位价格', trigger: 'change'}
                ]
            },
            lineOptions: [],
            carParkOptions: [],
            vehicleTypeOptions: [],
            batchPrice:'',
            headerCellStyle:{
                "background-color":"#F2F5FC"
            }
        }
    },
    created() {
        this.getCarParkList()
        this.getLineList()
    },
    methods: {
        // 获取线路列表
        getLineList() {
            LineApi.getList().then((data) => {
                this.lineOptions = data
            })
        },

        // 获取车场列表
        getCarParkList() {
            CarParkApi.getList(null).then((data) => {
                this.carParkOptions = data
            })
        },

        // 获取线路组下的车型列表
        getVehicleTypeList() {
            if (!this.formData.lineId) {
                return false
            }

            const data = this.lineOptions.find(item => item.id === this.formData.lineId)

            LineGroupApi.getVehicleTypeListByLineGroupId(data.lineGroupId).then((data) => {
                this.vehicleTypeOptions = data
            })
        },

        // 获取座位列表
        getSeatList() {
            VehicleTypeSeatApi.getList(this.formData.vehicleTypeId).then((response) => {
                response.forEach(function(item){
                    item.vehicleTypeSeatId = item.id
                    item.id = null
                })
                this.formData.lineSectionSeatList = response
            })
        },

        // 提交表单
        submitForm() {
            const that = this
            that.$refs['formRef'].validate((valid) => {
                if (valid) {
                    const loading = this.$loading({
                      lock: true,
                      text: '请稍后...',
                      spinner: 'el-icon-loading',
                      background: 'rgba(0, 0, 0, 0.7)'
                    });

                    let data = Common.deepClone(that.formData)
                    data.lineSectionSeatList.forEach(function(item){
                        item.seatPrice = item.seatPrice * 100
                    })

                    LineSectionSeatApi.batchAdd(data).then((response) => {
                        this.$refs['formRef'].resetFields()
                        loading.close();
                    }).catch((e)=>{
                        loading.close();
                    })
                }
            })
        },

        selectAllStart() {
          let that = this
          that.formData.startCarParkIds = []
          that.carParkOptions.forEach(function(item){
            that.formData.startCarParkIds.push(item.id)
          })
        },
        selectOppositeStart(){
          let that = this
          let opposite = []
          that.carParkOptions.forEach(function(item){
            if(that.formData.startCarParkIds.indexOf(item.id)==-1){
              opposite.push(item.id)
            }
          })
          that.formData.startCarParkIds = opposite;
        },
        selectAllEnd() {
          let that = this
          that.formData.endCarParkIds = []
          that.carParkOptions.forEach(function(item){
            that.formData.endCarParkIds.push(item.id)
          })
        },
        selectOppositeEnd(){
          let that = this
          let opposite = []
          that.carParkOptions.forEach(function(item){
            if(that.formData.endCarParkIds.indexOf(item.id)==-1){
              opposite.push(item.id)
            }
          })
          that.formData.endCarParkIds = opposite;
        },
        batchSet(){
            let that = this
            if(that.batchPrice > 0){
                that.formData.lineSectionSeatList.forEach(function(item){
                    that.$set(item, 'seatPrice', that.batchPrice)
                })
            }
        },
    }
}
</script>
<style lang="scss" scoped>
  ::v-deep .el-checkbox-group{line-height:20px;}
</style>
